import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import { useRecoilValue } from 'recoil'
import { RegistedUser } from '../state'
import { VerifyCodeTextView } from '../../../widgets/VerifyCodeTextView'
import { Button } from 'antd'
import { User } from '../../../transfer/entities/User'
import { UserConfirmMail } from '../../../transfer/entities/User/Input'

interface IConfirmMailFormProps {
    onConfirmProcessing?: () => void
    onConfirmSuccess?: () => void
    onConfirmFailed?: (message: string) => void
}

export function ConfirmMailForm(props: IConfirmMailFormProps) {
    const registedUser = useRecoilValue(RegistedUser)
    const [verifyCode, setVerifyCode] = useState('')
    const [counter, setCounter] = useState(60)
    const [beginCounter, setBeginCounter] = useState(false)

    const inputVerifyChange = (value: string) => {
        setVerifyCode(value)
    }

    const onBtnConfirmMailClick = async () => {
        if (props.onConfirmProcessing) props.onConfirmProcessing()
        const res = await new User<UserConfirmMail>({
            userId: registedUser.userId,
            verifyCode: verifyCode
        }).confirmMail()
        if (res.code === 200) {
            if (props.onConfirmSuccess) props.onConfirmSuccess()
            return
        }
        if (props.onConfirmFailed) props.onConfirmFailed(res.message ? res.message : '未知错误')
    }

    const onRequireConfirmMail = async () => {
        if (!beginCounter) {
            setBeginCounter(true)
            const res = await new User<any>().requireConfirmMail(registedUser.userId)
            if (res.code === 201) {
                return
            }
        }
    }

    let timer: any
    useEffect(() => {
        if (beginCounter) {
            timer = setInterval(() => {
                setCounter(prevState => {
                    if (prevState === 0) {
                        clearInterval(timer)
                        setBeginCounter(false)
                        return 60
                    }
                    return prevState - 1
                })
            }, 1000)
        }
    }, [beginCounter])

    return (
        <div className={style.container}>
            <h1>验证邮箱</h1>
            <h4>Hi {registedUser.userName}，</h4>
            <h4>
                我们已向您的邮箱账户 {registedUser.email} 发送了一封带有验证码的邮件，请前往邮箱查收并将验证码填入下方：
            </h4>
            <VerifyCodeTextView onChange={inputVerifyChange} />
            <div className={style.tips}>
                <span>
                    没有收到验证码？
                    <a href="#" onClick={onRequireConfirmMail}>
                        {!beginCounter ? '重新发送' : `${counter}秒`}
                    </a>
                </span>
            </div>
            <div className={style.announce}>
                <p>注册成为Leo·Gee会员后，你可以：</p>
                <ul>
                    <li>多端同步你的浏览记录</li>
                    <li>跨终端查看你的心愿单、购物车信息</li>
                    <li>享受消费积分折扣</li>
                    <li>订阅季度新品通知</li>
                    <li>订阅每月时尚杂志</li>
                </ul>
            </div>
            <div style={{ marginTop: 40, display: 'flex', flexDirection: 'row-reverse' }}>
                <Button type="primary" shape="round" onClick={onBtnConfirmMailClick}>
                    完成注册
                </Button>
            </div>
        </div>
    )
}
